import React, { useCallback, useEffect, useState } from "react"
import './index.css'

const during_second = 3

const Welcome = (props)=>{
    
    

    const [skip_second,setskip_second] =  useState(during_second)



    useEffect(()=>{
        const t1 = setTimeout(() => {
            props.history.push({pathname:'main'})
        }, during_second*1000);
        return ()=>{
                clearTimeout(t1)
                console.log('distroyed welcome');
        }
    },[])

   

    useEffect(()=>{
        
        skip_second !==0 && setTimeout(()=>{
            setskip_second(skip_second-1)
        },1000)
        
    },[skip_second])


    const skip = useCallback(()=>{

        props.history.push({pathname:'main'})
        
    },[])

    return (<div className="welcome">
                <div className='content'>
                </div>
                <div className="text">
                    <div >欢迎来到孔子学院</div>
                    <div>Welcome to Confucius Institute</div>
                </div>
                
                
                <div className="kz"></div>
                <div className="skip" onClick={skip}>跳过{skip_second}</div>
            </div>
    )
}

export default Welcome